import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Tabs, message } from 'antd'
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  FormOutlined,
  DeleteOutlined,
} from '@ant-design/icons'
class TabsComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Tabs',
      defaultActiveKey: '1',
      listBasicTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
        },
        {
          name: '第四个',
          key: 4,
          content: '第四个内容',
        },
      ],
      listIconTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
          iconfont: <DownloadOutlined />,
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
          iconfont: <SearchOutlined />,
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
          iconfont: <PlusOutlined />,
        },
        {
          name: '第四个',
          key: 4,
          content: '第四个内容',
          iconfont: <FormOutlined />,
        },
        {
          name: '第五个',
          key: 5,
          content: '第五个内容',
          iconfont: <DeleteOutlined />,
        },
      ],
      listEditTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
          iconfont: <SearchOutlined />,
          closable: false,
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
          iconfont: <FormOutlined />,
          closable: false,
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
          closable: false,
          iconfont: <DeleteOutlined />,
        },
      ],
      activeKey: '1',
    }
    this.handleChange = this.handleChange.bind(this)
    this.onEdit = this.onEdit.bind(this)
    this.remove = this.remove.bind(this)
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          {/*基础知识点开始*/}
          <CardWrap>
            <Card title="Tabs基础知识点">
              <p>1.使用Tabs作为最外层的标签 defaultActiveKey 默认选中</p>
              <p>2.内层标签用Tabs.TabPane来区分每一个</p>
              <p>3.禁用的话就把前面加上disabled</p>
              <p>4.tab里面放icon</p>
              <p>5.事件必须用onChange</p>
              <p>6.选项卡有没有×号看的是closable</p>
            </Card>
          </CardWrap>
          {/*基础使用*/}
          <CardWrap>
            <Card title="Tabs基础知识点">
              <Tabs
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
              >
                {this.state.listBasicTab.map((item) => {
                  if (item.key === 3) {
                    return (
                      <Tabs.TabPane tab={item.name} key={item.key} disabled>
                        {item.content}
                      </Tabs.TabPane>
                    )
                  }
                  return (
                    <Tabs.TabPane tab={item.name} key={item.key}>
                      {item.content}
                    </Tabs.TabPane>
                  )
                })}
              </Tabs>
            </Card>
          </CardWrap>
          {/*带图标的使用*/}
          <CardWrap>
            <Card title="Tabs带图标">
              <Tabs
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
              >
                {this.state.listIconTab.map((item) => {
                  return (
                    <Tabs.TabPane
                      key={item.key}
                      tab={
                        <span>
                          {item.iconfont}
                          {item.name}
                        </span>
                      }
                    >
                      {item.content}
                    </Tabs.TabPane>
                  )
                })}
              </Tabs>
            </Card>
          </CardWrap>
          {/*新增和删除的Tab标签*/}
          <CardWrap>
            <Card title="新增和删除Tab标签">
              <Tabs
                activeKey={this.state.activeKey}
                defaultActiveKey={this.state.defaultActiveKey}
                onChange={this.handleChange}
                type="editable-card"
                onEdit={this.onEdit}
              >
                {this.state.listEditTab.map((item) => {
                  return (
                    <Tabs.TabPane
                      key={item.key}
                      tab={
                        <span>
                          {item.iconfont}
                          {item.name}
                        </span>
                      }
                      closable={item.closable}
                    >
                      {item.content}
                    </Tabs.TabPane>
                  )
                })}
              </Tabs>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
  handleChange(e) {
    message.success({
      content: `这就是内容,3s后自动消失${e}`,
      className: 'custom-class2',
      style: {
        marginTop: '20vh',
      },
      duration: 3,
    })
    this.setState({
      activeKey: e,
    })
  }
  onEdit(targetKey, action) {
    console.log(action) //结果就是remove
    console.log(targetKey) //结果就是活跃的key
    this[action](targetKey)
  }
  add = () => {
    const { listEditTab } = this.state
    console.log(listEditTab.length)
    let activeKey = (listEditTab.length + 1).toString() //前面加中文是为了防止和最开始的key重复
    listEditTab.push({
      name: `新增加的${activeKey}`,
      key: activeKey,
      content: '新增加的内容',
      iconfont: <FormOutlined />,
    })
    this.setState({ listEditTab, activeKey })
  }
  remove(targetKey) {
    //targetkey 就是你要删除的key
    let { activeKey } = this.state //获取到当前索引
    let lastIndex //一个序号 找到最后在数组里面的实际位置
    console.log(targetKey)
    console.log(activeKey)
    console.log('删除')
    this.state.listEditTab.forEach((pane, i) => {
      if (pane.key === targetKey) {
        //表示如果要相等就-1这样排除掉第一个
        lastIndex = i - 1
      }
    })
    let listEditTab = this.state.listEditTab.filter(
      (pane) => pane.key !== targetKey
    ) //保留下除去你要删除的选项
    if (listEditTab.length && activeKey === targetKey) {
      //最后找到实际在panes里面的key值
      if (lastIndex >= 0) {
        activeKey = listEditTab[lastIndex].key.toString()
      } else {
        activeKey = listEditTab[0].key.toString()
      }
    }
    this.setState({ listEditTab, activeKey })
  }
}

export default TabsComponent
